<div v-if="typeof source.product_category_init !== 'undefined'">
<x-admin::form.row :title="__('admin/category.index')">
  <div class="wp-400 form-control" style="max-height: 240px;overflow-y: auto">
    <el-tree

      ref="categories_tree"
      v-if="typeof source.categories_new !== 'undefined'"
      :data="source.categories_new"
      show-checkbox
      :check-strictly="true"
      node-key="id"
      :default-expanded-keys="source.choose_categories_new"
      :default-checked-keys="source.choose_categories_new"
      :props="{children: 'children',label: 'name'}"
      @check-change="handleCheckChange"
    >
    </el-tree>
  </div>
  <input type="hidden" v-if="typeof source.choose_categories_new !== 'undefined'" v-for="item in source.choose_categories_new" :key="item" :value="item" name="categories[]">
</x-admin::form.row>
</div>

@push("footer")
  <script>

    $(function () {

      app.$set(app.source, "choose_categories_new", @json($category_ids));
      app.handleCheckChange = function (data, checked, indeterminate) {
        var treeKeys = app.$refs.categories_tree.getCheckedKeys()
        app.$set(app.source, "choose_categories_new", treeKeys);
      };
      app.$set(app.source, "categories_new", @json($source['categories2']));
      app.$set(app.source, "product_category_init", 1);
    });

  </script>
@endpush
